<template>
    <div class="sys-org-container">

        <div style="width: 100%;">
            <screening-Condition :inquireInfo="state.inquireInfo" @getChildren="getData">
                <el-button @click="openAddOrg" type="primary">新增</el-button>
            </screening-Condition>
        </div>
        <el-card class="full-table" shadow="hover" style="margin-top: 5px">
            <!-- 列表展示 -->
            <el-table :data="state.tableData" v-loading="state.loading" border highlight-current-row
                :header-cell-style="{ background: 'var(--el-color-primary)', height: '55px', color: '#fff', border: '1px solid #fff', fontWeight: 'bold', fontSize: '13px' }"
                :cell-style="{ padding: '2px' }" ref="el_table">
                <el-table-column type="index" label="序号" align="center"></el-table-column>
                <el-table-column prop="status" label="状态" align="center" width="70">
                    <template #default="scope">
                        <el-tag type="success" v-if="scope.row.status === 1">启用</el-tag>
                        <el-tag type="danger" v-else>停用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="code" label="编号" align="center" />
                <el-table-column prop="name" label="名称" align="center" />
                <el-table-column prop="dictTypeId" label="容器类型" align="center">
                    <template v-slot="scope">
                        <div v-if="scope.row.dictTypeId == dictType2">
                            料箱
                        </div>
                        <div v-else>栈板</div>
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="容器描述" align="center" />
                <el-table-column fixed="right" label="操作" width="120" align="center">
                    <template #default="scope">
                        <el-button type="primary" size="small" @click="openEdit(scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <el-pagination v-model:current-page="state.queryParams.page" v-model:page-size="state.queryParams.pagesize"
                :page-sizes="[20, 30, 40, 50]" layout="->,total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" :small="true" />
        </el-card>



        <el-drawer v-model="addDrawer" title="新增容器规格" size="30%">
            <el-form :model="ruleForm" ref="ruleFormRef" class="fl" label-width="auto">
                <el-form-item label="容器类型" prop="dictTypeName"
                    :rules="[{ required: true, message: '容器类型不能为空', trigger: 'blur' }]">
                    <el-select v-model="ruleForm.dictTypeName" placeholder="请选择容器类型" style="width: 240px"
                        @blur="getUserClickID">
                        <el-option v-for="item in state.containerTypes" :key="item.value" :label="item.name"
                            :value="item.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="容器编号" prop="code">
                    <el-input v-model="ruleForm.code" />
                </el-form-item>
                <el-form-item label="规格名称" prop="name">
                    <el-input v-model="ruleForm.name" />
                </el-form-item>
                <el-form-item label="状态">
                    <el-switch v-model="ruleForm.status" inline-prompt active-text="启用" inactive-text="禁用"
                        :active-value="1" :inactive-value="0" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="ruleForm.remark" type="textarea" />
                </el-form-item>
            </el-form>
            <div style="width: 100%; display: flex; justify-content: center; margin-top: 60px">
                <el-button @click="handleAddSubmit" type="primary" round
                    style="width: 80px; height: 30px">确认</el-button>
                <el-button @click="handleAddCancel" round style="width: 80px; height: 30px">取消</el-button>
            </div>
        </el-drawer>
        <el-drawer v-model="editDrawer" title="编辑容器规格" size="30%">
            <el-form :model="ruleForm2" class="fl" ref="ruleForm2Ref" label-width="auto">
                <el-form-item label="容器类型" prop="dictTypeName"
                    :rules="[{ required: true, message: '容器类型不能为空', trigger: 'blur' }]">
                    <el-select v-model="ruleForm2.dictTypeID" placeholder="请选择容器类型" style="width: 240px"
                        @blur="getUserClickID">
                        <el-option v-for="item in state.containerTypes" :key="item.value" :label="item.name"
                            :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="容器编号" prop="code">
                    <el-input v-model="ruleForm2.code" />
                </el-form-item>
                <el-form-item label="规格名称" prop="name">
                    <el-input v-model="ruleForm2.name" />
                </el-form-item>
                <el-form-item label="状态">

                    <el-switch v-model="ruleForm2.status" inline-prompt active-text="启用" inactive-text="禁用"
                        :active-value="1" :inactive-value="0" />
                </el-form-item>
                <el-form-item label="备注">
                    <el-input v-model="ruleForm2.remark" type="textarea" />
                </el-form-item>
            </el-form>
            <div style="width: 100%; display: flex; justify-content: center; margin-top: 60px">
                <el-button @click="handleEditSubmit" type="primary" round
                    style="width: 80px; height: 30px">确认</el-button>
                <el-button @click="handleEditCancel" round style="width: 80px; height: 30px">取消</el-button>
            </div>
        </el-drawer>
        <EditPos ref="editPosRef" :title="state.editPosTitle" @handleQuery="getData" />
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { TabsPaneContext, ElMessage, ElMessageBox } from 'element-plus'
import { WmsApi } from "/@/api/wh";
import screeningCondition from '/@/views/tools/screeningCondition.vue'
import { SysDictDataApi } from '/@/api-services';
import { getAPI } from '/@/utils/axios-utils';
import EditPos from '/@/views/system/materielGUI/component copy/editPos.vue';
const editDrawer = ref(false)
const el_table = ref()
const addDrawer = ref(false)
const total = ref(0);
const ruleFormRef = ref()
const ruleForm2Ref = ref()
const precondition = ref({})
const ruleForm = ref({})
const ruleForm2 = ref({})
const dictType1 = ref(0)
const dictType2 = ref(0)
const editPosRef = ref()
const state = reactive({
    editPosTitle: '',
    //所有物料等级
    containerTypes: [],
    tableData: [],
    queryParams: {
        page: 0,
        pagesize: 20,
        dictTypeId: 0
    },
    inquireInfo:
        [
            {
                label: "容器类型",
                value: "",
                key: "dictTypeId",
                options: [],
                type: "select",
            }]

})
onMounted(async () => {
    await WmsApi().getUserClickContainID({
        "code": 'pallet_type'
    }).then(
        res => {
            //根据得到的Name给到ID
            dictType1.value = res.data.result.items[0].id
        }
    ).catch(
        err => {
            console.log(err);
        }
    )
    await WmsApi().getUserClickContainID({
        "code": 'workbin_type'
    }).then(
        res => {
            //根据得到的Name给到ID
            dictType2.value = res.data.result.items[0].id
            state.inquireInfo[0].options = [
                { value: dictType1.value, label: "栈板" },
                { value: dictType2.value, label: "料箱" },
            ];
            state.queryParams.dictTypeId = dictType1.value
        }
    ).catch(
        err => {
            console.log(err);
        }
    )
    var res = await getAPI(SysDictDataApi).apiSysDictDataDataListCodeGet('container_type');
    state.containerTypes = res.data.result;

    getData(state.queryParams)

})


// 打开新增页面
const openAddOrg = () => {
    // state.ruleForm2 = {};
    // addDrawer.value = true;
    state.editPosTitle = '添加新仓库';
    editPosRef.value?.openDialog(state.ruleForm);
};

// 打开编辑页面
const openEdit = (row) => {

    // editDrawer.value = true;
    // state.ruleForm = row;
    state.editPosTitle = '编辑仓库';
    editPosRef.value?.openDialog(row);
};
//处理子组件抛出的函数
const getData = (info: { page: number; pagesize: number; dictTypeId: number; }) => {
    //把用户输入的参数保存住
    precondition.value = info;
    console.log('info', info);
    //把上次保存的下拉筛选条件保存下来
    state.queryParams.dictTypeId = info.dictTypeId
    //把用户输入的参数写入接口参数
    WmsApi().getAllDict({
        page: state.queryParams.page,
        pageSize: state.queryParams.pagesize,
        dictTypeId: info.dictTypeId,
    }).then(
        res => {
            state.tableData = res.data.result.items;
            total.value = res.data.result.total;
        }
    ).catch(
        err => {
            console.log(err);
        }
    )
}
const getUserClickID = () => {
    console.log(ruleForm.value.dictTypeName);

    WmsApi().getUserClickContainID({
        "code": ruleForm.value.dictTypeName
    }).then(
        res => {
            //根据得到的Name给到ID
            ruleForm.value.dictTypeID = res.data.result.items[0].id
        }
    ).catch(
        err => {
            console.log(err);
        }
    )

}
const handleClickAdd = () => {
    addDrawer.value = true;
}
const handleEditCancel = () => {
    editDrawer.value = false;
    getData(state.queryParams)
}
const handleAddCancel = () => {
    addDrawer.value = false;
    console.log(state.queryParams);

    getData(state.queryParams)
}
// 编辑方法
const handleClickEdit = (row) => {
    editDrawer.value = true;
    console.log('row', row);

    ruleForm2.value = Object.assign({}, row)

}
//删除
const handleDelete = (row) => {
    console.log(row);

    ElMessageBox.confirm(`确定删除该容器吗：【${row.name}】?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(async () => await WmsApi().delDictData({ id: row.id })
            .then(function (res) {


                ElMessage.success('删除成功');
                getData(state.queryParams);
            }))
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '删除取消了',
            })
        });
}

//添加容器信息
const handleAddSubmit = () => {
    //校验 不通过报红色提示
    ruleFormRef?.value.validate(async (valid) => {
        if (!valid) return;
        ruleForm.value.value = ruleForm.value.code;
        console.log(ruleForm.value);
        WmsApi().addNewDict(ruleForm.value).then(
            res => {
                ElMessage.success('新增成功');

                handleAddCancel();
            }
        )
    });
}
//高亮选中行

//修改容器信息
const handleEditSubmit = () => {

    ruleForm2Ref?.value.validate(async (valid) => {
        if (!valid) return;
        console.log(ruleForm2.value);

        WmsApi().modifyDict(ruleForm2.value).then(
            res => {
                ElMessage.success('修改成功');

                handleEditCancel();
            }
        )
    });
}
//当大小改变时触发,但是原先的搜索条件还是要
const handleSizeChange = (val) => {
    console.log(val);
    state.queryParams.pagesize = val;
    console.log(state.queryParams);
    state.queryParams.materielLevelName = precondition.value.materielLevelName;
    state.queryParams.materielLevelNum = precondition.value.materielLevelNum;

    getData(state.queryParams)
}
//当页数改变时触发
const handleCurrentChange = (val) => {
    state.queryParams.page = val;

    state.queryParams.materielLevelName = precondition.value.materielLevelName;
    state.queryParams.materielLevelNum = precondition.value.materielLevelNum;
    getData(state.queryParams)

}
</script>
<style lang="scss" scoped>
body .el-table th.gutter {
    display: table-cell !important;
}
</style>